import React from "react";


interface Props{
    //控制弹窗是否渲染
    isOpen:boolean
    //弹框标题
    title:string
    //弹框提示内容
    content:React.ReactNode
    //关闭弹窗的方法
    close:()=>void
    //点击取消时执行的方法
    onCancelButtonClicked:()=>void
    //点击确定时执行的方法
    onSureButtonClicked:()=>void
}



export default class confirm extends React.Component<Props> {

    //默认值
    static defaultProps = {
        title:'温馨提示',
        onCancelButtonClicked:()=>{},
        onSureButtonClicked:()=>{}
    }

  render() {
    const {title,isOpen,content,close,onCancelButtonClicked,onSureButtonClicked} = this.props
    


    return (isOpen ?<div className="modal is-active">
    <div className="modal-background" style={{ backgroundColor: "rgba(0,0,0,0.5)" }}></div>
    <div className="modal-card">
      <header className="modal-card-head">
        <p className="modal-card-title">{title}</p>
        <button className="delete" onClick={()=>{close(); onCancelButtonClicked()}} ></button>
      </header>
      <section className="modal-card-body">{content}</section>
      <footer className="modal-card-foot">
        <button className="button is-success"onClick={()=>{close(); onSureButtonClicked()}} >确定</button>
        <button className="button is-info" onClick={()=>{close(); onCancelButtonClicked()}}>取消</button>
      </footer>
    </div>
  </div>:null
        
    );
  }
}